<template>
	<div id="pdf-container" ref="pdfContainer">
		<button @click="getOnePdf" class="html2pdf-btn">单页pdf</button>
		<div id="my_bar_chart4" class="echart-box"></div>
		<div class="row">
			<div id="my_bar_chart3" class="echart-box"></div>
			<div id="my_bar_chart2" class="echart-box"></div>
		</div>
		<div id="my_bar_chart" class="echart-box"></div>
    <div id="my_pie_chart" class="echart-box"></div>
    <div id="my_line_chart" class="echart-box"></div>
	</div>
</template>

<script>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import * as echarts from 'echarts'
export default {
	name: 'EchartIndex',
	data() {
		return {
			pdf: null,
			myChart: null,
			barChart: null, // 柱状图
      pieChart: null, // 饼图
      lineChart: null, // 折线图
		}	
	},
	created() {
	},
	mounted() {
		this.barChart4 = echarts.init(document.getElementById("my_bar_chart4"));
		this.barChart3 = echarts.init(document.getElementById("my_bar_chart3"));
		this.barChart2 = echarts.init(document.getElementById("my_bar_chart2"));
    this.barChart = echarts.init(document.getElementById("my_bar_chart"));
    this.pieChart = echarts.init(document.getElementById("my_pie_chart"));
    this.lineChart = echarts.init(document.getElementById("my_line_chart"));
		this.barChart.on('click', function (param) {  
				//param参数包含的内容有： 
				//param.name：X轴的值 
				//param.data：Y轴的值 
				//param.value：Y轴的值 
				//param.type：点击事件均为click 
				//param.seriesName：legend的名称 
				//param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
				//param.dataIndex：数值序列（X轴上当前点是第几个点）
				//alert(param.seriesName);  //legend的名称
				console.log(param)
				// alert(param);  //X轴的值
				// alert(option.series[param.seriesIndex].barIds[param.dataIndex]);//获取自定义的值
		});
		this.initChartOption();
    // 监听窗口大小变化，重新resize图表
    window.addEventListener('resize', this.resizeChart);
  },
	beforeDestroy() {
		// 清理图表实例，避免内存泄露
		if (this.barChart4) {
      this.barChart4.dispose();
    }
		if (this.barChart3) {
      this.barChart3.dispose();
    }
		if (this.barChart2) {
      this.barChart2.dispose();
    }
    if (this.barChart) {
      this.barChart.dispose();
    }
		if (this.pieChart) {
      this.pieChart.dispose();
    }
		if (this.lineChart) {
      this.lineChart.dispose();
    }
    // 移除窗口resize事件监听
    window.removeEventListener('resize', this.resizeChart);
	},
	methods: {
		initChartOption() {
			this.barChart4.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['销量', '增长率']
    },
    grid: {
        left: '10%',
        right: '20%',
        bottom: '3%',
        containLabel: true,
        show: true,
    },
    yAxis: {  // 原来的 xAxis 变成新的 yAxis
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
				// axisLabel: {
				// 	margin: 20
				// }
    },
    xAxis: [  // 原来的 yAxis 变成新的 xAxis
        {
            type: 'value',
            name: '销量',
            position: 'bottom',  // 确保位置正确
            // axisLine: { show: true }
						// axisLine: { show: false },  // 隐藏轴线
            // axisTick: { show: false },  // 隐藏刻度
            // axisLabel: { show: false }  // 隐藏标签
        },
        {
            type: 'value',
            name: '增长率',
            position: 'top',  // 确保位置正确
            // axisLine: { show: false },  // 隐藏轴线
            // axisTick: { show: false },  // 隐藏刻度
            // axisLabel: { show: false },  // 隐藏标签
            // offset: 80
        }
    ],
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [1, 2, 5, 10, 11, 12, 13],
            xAxisIndex: 0,  // 指定使用第一个x轴
            yAxisIndex: 0,  // 指定使用新的y轴
            label: {
                show: true,
                position: 'left', // 将标签显示在柱状图的右侧
                offset: [30, 0],   // 进一步调整标签与图形之间的距离
                formatter: '{c}'
            }
        },
        {
            name: '增长率',
            type: 'line',
            xAxisIndex: 1,  // 使用第二个x轴
            yAxisIndex: 0,  // 同样指定使用新的y轴
            data: [-100, 40, -100, 60, -70, 100, -30], // 包含负数
            label: {
                show: true,
                position: 'top', // 将标签显示在折线图的右侧
                offset: [0, 0],   // 进一步调整标签与图形之间的距离
                formatter: '{c}'  // 格式化标签，确保正确显示负数
            }
        }
    ]
});
			this.barChart3.setOption({
				title: {
					text: 'Bar Chart with Negative Value'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					top: 80,
					bottom: 30
				},
				xAxis: {
					inverse: true,
					type: 'value',
					position: 'bottom',
					splitLine: {show: false}
					// splitLine: {
					//   lineStyle: {
					//     type: 'dashed'
					//   }
					// }
				},
				yAxis: {
					type: 'category',
					position:'right',
					// axisLine: { show: false },
					// axisLabel: { show: false },
					// axisTick: { show: false },
					// splitLine: { show: false },
					data: [
						'16',
						'nine',
						'eight',
						'seven',
						'six',
						'five',
						'four',
						'three',
						'two',
						'one'
					]
				},
				series: [
					{
						name: 'Cost',
						type: 'bar',
						stack: 'Total',
						label: {
							show: true,
							formatter: '{b}%'
						},
						data: [
							{ value: 20},
							{ value: 30 },
							40,
							50,
							{ value: 60 },
							70,
							{ value: 80 },
							90,
							{ value: 400 },
							60
						]
					}
				]
			});
			this.barChart2.setOption({
				title: {
					text: 'Bar Chart with Negative Value'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					top: 80,
					bottom: 30
				},
				xAxis: {
					type: 'value',
					position: 'bottom',
					splitLine: {show: false}
					// splitLine: {
					//   lineStyle: {
					//     type: 'dashed'
					//   }
					// }
				},
				yAxis: {
					type: 'category',
					axisLine: { show: false },
					axisLabel: { show: false },
					axisTick: { show: false },
					splitLine: { show: false },
					data: [
						'16',
						'nine',
						'eight',
						'seven',
						'six',
						'five',
						'four',
						'three',
						'two',
						'one'
					]
				},
				series: [
					{
						name: 'Cost',
						type: 'bar',
						stack: 'Total',
						label: {
							show: true,
							formatter: '{b}%'
						},
						data: [
							{ value: -0.07},
							{ value: -0.09 },
							0.2,
							0.44,
							{ value: -0.23 },
							0.08,
							{ value: -0.17 },
							0.47,
							{ value: -0.36 },
							0.18
						]
					}
				]
			});
      this.barChart.setOption({
        title: {
          text: "柱状图",
          textStyle: {
            color: "pink", // 标题颜色
            fontSize: 14, // 默认值：18
            fontStyle: "italic", // normal:正常风格（默认值）,italic:倾斜体
            fontWeight: "bold" // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
          },
          subtext: "柱状图副标题"
        },
        grid: {
          left: "40px",
          right: "10px",
          bottom: "30px"
        },
        xAxis: {
          show: true,
          axisTick: {
            show: false,
            length: 20 // 竖线的长度
          },
          data: ["张三", "李四", "王五"],
					triggerEvent: true
        },
        yAxis: {
          axisLabel: {
            show: true
          }
        },
        series: [
          {
            name: "访问来源",
            type: "bar", // 设置图表类型为柱状
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "张三" },
              { value: 274, name: "李四" },
              { value: 310, name: "王五" }
            ]
          }
        ]
      });
      this.pieChart.setOption({
        title: {
          text: "饼图"
        },
        series: [
          {
            name: "访问来源",
            type: "pie", // 设置图表类型为饼图
            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "张三" },
              { value: 274, name: "李四" },
              { value: 310, name: "王五" }
            ]
          }
        ]
      });
      this.lineChart.setOption({
        title: {
          text: "折线图"
        },
        grid: {
          left: "40px",
          right: "10px",
          bottom: "30px"
        },
        xAxis: {
          show: true,
          data: ["张三", "李四", "王五"],
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
            length: 20 // 竖线的长度
          }
        },
        yAxis: {
          splitLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}%"
          }
        },
        series: [
          {
            name: "访问来源",
            type: "line",
            data: [
              { value: 23, name: "张三" },
              { value: 74, name: "李四" },
              { value: 31, name: "王五" }
            ]
          }
        ]
      });
    },
    resizeChart() {
			this.barChart4 && this.barChart4.resize(); // 柱状图
			this.barChart3 && this.barChart3.resize(); // 柱状图
			this.barChart2 && this.barChart2.resize(); // 柱状图
			this.barChart && this.barChart.resize(); // 柱状图
			this.pieChart && this.pieChart.resize(); // 饼图
			this.lineChart && this.lineChart.resize(); // 折线图
    },
		// 单页pdf：css高度自适应即可（此处用的一个css，为了实现多页pdf同时不让分页分割图片，css中写死了每页的高度.a4page）
    getOnePdf() {
      var title = "单页报告";
      var dom = document.getElementById("pdf-container");  // 生成pdf的html内容
			console.log(dom.scrollHeight)
			this.totalPage = Math.floor(dom.scrollHeight / dom.offsetHeight)
			dom.style.height = dom.scrollHeight + 'px'
      html2Canvas(dom, {
				dpi: window.devicePixelRatio * 4,
        allowTaint: false,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求
        width: dom.scrollWidth, //画布高度（包含未显示的滚动部分）
        height: dom.scrollHeight, //画布高度（包含未显示的滚动部分）
				windowWidth: dom.scrollWidth,
				windowHeight: dom.scrollHeight
      }).then((canvas) => {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pdfWidth = (contentWidth + 10) / 2 * 0.75;
        var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
        var imgWidth = pdfWidth;
        var imgHeight = contentHeight / 2 * 0.75; //内容图片这里不需要留白的距离
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
				if(!this.pdf) {
					this.pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
				}
        this.pdf.addImage(pageData, "jpeg", 0, this.scrollHeight, imgWidth, imgHeight);
				this.page++
				this.scrollHeight += imgHeight
				if(dom.scrollTop + dom.clientHeight >= dom.scrollHeight) {
					this.pdf.save(title + ".pdf");
				} else {
					this.$refs.pdfContainer.scroll({
						top:dom.offsetHeight * this.page
					})
					setTimeout(() => {
						this.getOnePdf()
					}, 300)
				}
      });
    },
	}
}
</script>

<style lang="scss" scoped>
.html2pdf-btn{
}
.echart-box{
	flex-shrink: 0;
	width: 300px;
	height: 300px;
	border: 1px solid #ccc;
}
.row{
	display: flex;
	.echart-box{
		width: 50%;
	}
}
</style>